<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="8" style="text-align: left">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     :loading="downloadLoading" icon="el-icon-download" @click="exportExcel">导出
          </el-button>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item fsc-search" placeholder="车架号-回车查询" v-model="listQuery.condition.vin" @keyup.enter.native="searchClick"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="searchClick">
            搜索
          </el-button>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline" @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="omsOrderNo">订单号</el-checkbox>
                  <el-checkbox label="vin">车架号</el-checkbox>
                  <el-checkbox label="qrCode">二维码</el-checkbox>
                  <el-checkbox label="taskNode">异常分类</el-checkbox>
                  <el-checkbox label="dealStatus">异常状态</el-checkbox>
                  <el-checkbox label="exDescribe">异常描述</el-checkbox>
                  <el-checkbox label="registerUser">登记人</el-checkbox>
                  <el-checkbox label="involvedParty">责任方</el-checkbox>
                  <el-checkbox label="picKey">异常图片</el-checkbox>
                  <el-checkbox label="registerTime">登记时间</el-checkbox>
                  <el-checkbox label="dealType">处理方式</el-checkbox>
                  <el-checkbox label="dealResultDesc">处理结果</el-checkbox>
                  <el-checkbox label="dealEndTime">处理完成时间</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>

    <div :class="{'search-transition':searchFlag,h0:true,hAuto:searchFlag,'search-content':true}">
      <el-form ref="form" :model="listQuery.condition" label-width="80px" :inline="true">
        <el-form-item label=订单号:>
          <el-input  placeholder="请输入订单号" class="w200" clearable v-model="listQuery.condition.orderNo" ></el-input>
        </el-form-item>
        <el-form-item label=异常分类:>
          <el-select v-model="listQuery.condition.taskNode" placeholder="请选择异常分类">
            <el-option label="寻车" value="10"></el-option>
            <el-option label="移车" value="20"></el-option>
            <el-option label="提车" value="30"></el-option>
            <el-option label="入库" value="40"></el-option>
            <el-option label="出库" value="50"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=异常状态:>
          <el-select v-model="listQuery.condition.dealStatus" placeholder="请选择异常状态">
            <el-option label="未处理" value="10"></el-option>
            <el-option label="处理中" value="20"></el-option>
            <el-option label="关闭" value="30"></el-option>
            <el-option label="让步" value="40"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登记时间:">
          <el-date-picker class="w200" v-model="listQuery.condition.startDate" type="datetime" placeholder="选择日期时间"  value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
          <span style="padding: 0 6px">至</span>
          <el-date-picker class="w200" v-model="listQuery.condition.endDate" type="datetime" placeholder="选择日期时间"  value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="clean:both"></div>
    <el-table ref="expectionTable" :data="exceptionList" v-loading="listLoading" element-loading-text="加载中" border fit highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableThead' :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'taskNode'">{{scope.row[value.key] | exceptionTaskNodeFilter}}</div>
          <div v-else-if="value.key === 'dealStatus'">{{scope.row[value.key] | exceptionDealStatusFilter}}</div>
          <div v-else-if="value.key === 'dealType'">{{scope.row[value.key] | exceptionDealTypeFilter}}</div>
          <div v-else-if="value.key === 'picKey'">
            <el-button type="primary" @click="checkPic(scope.row.picUrlInfoList)">查看</el-button>
          </div>
          <div v-else-if="value.key === 'exDescribe'">
            <div class="detailBox">
              <div v-for="(item,index) in scope.row.picUrlInfoList">{{item.exDescribe}}</div>
            </div>
          </div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current" :page-sizes="[10,20,30,50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>
    <el-dialog title="异常图片" :visible.sync="dialogVisible" width="30%" >
      <div v-for="(item,index) in imgList">
        <span>{{item.exDescribe}}</span>
        <div style="width: 80%; margin: 10px auto">
          <img :src="item.picUrl" alt="" style="width: 100%" >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import * as exceptionAPI from '@/api/pick/exception'
  import waves from '@/directive/waves' // 水波纹指令
  const defautlTableThead = [

    { key: 'omsOrderNo', title: '订单号', width: '' },
    { key: 'vin', title: '车架号', width: '' },
    { key: 'qrCode', title: '二维码', width: '' },
    { key: 'taskNode', title: '异常分类', width: 106 },
    { key: 'dealStatus', title: '异常状态', width: 106 },
    { key: 'exDescribe', title: '异常描述', width: 180 },
    { key: 'registerUser', title: '登记人', width: 106 },
    { key: 'involvedParty', title: '责任方', width: 106 },
    { key: 'picKey', title: '异常图片', width: 106 },
    { key: 'registerTime', title: '登记时间', width: 160 },
    { key: 'dealType', title: '处理方式', width: 106 },
    { key: 'dealResultDesc', title: '处理结果', width: 106 },
    { key: 'dealEndTime', title: '处理完成时间', width: 160 }
  ]
  export default {
    name: 'exception',
    directives: {
      waves
    },
    data() {
      return {
        theadCheckVal: [
          'omsOrderNo',
          'vin',
          'qrCode',
          'taskNode',
          'dealStatus',
          'exDescribe',
          'registerUser',
          'involvedParty',
          'picKey',
          'registerTime',
          'dealType',
          'dealResultDesc',
          'dealEndTime'
        ],
        tableThead: defautlTableThead,
        listQuery: {
          current: 1,
          size: 10,
          total: 0,
          condition: {}
        },
        exDescribeList: [],
        imgList: [],
        exceptionList: [],
        listLoading: true,
        searchFlag: false,
        dialogVisible: false,
        downloadLoading: false,
        downloadData: [],
        timePicker: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        }
      }
    },
    created() {
      this.list()
    },
    watch: {
      theadCheckVal(valArr) {
        this.tableThead = defautlTableThead.filter(v => {
          for (var i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        // 列表查询
        this.listLoading = true
        // 处理是否展开更多
        let queryParam = {}
        if (this.$data.searchFlag) {
          queryParam = this.$data.listQuery
        } else {
          Object.assign(queryParam, this.$data.listQuery)
          queryParam.condition = {
            vin: this.$data.listQuery.condition.vin
          }
        }
        // queryParam.condition.houseId = this.$store.getters.currentStorehouse.id
        exceptionAPI.getExceptionRegisterList(queryParam).then(result => {
          if (result.code === 0) {
            this.$data.exceptionList = result.data.records
            this.$data.imgList = result.data.records.picUrlInfoList
            this.$data.listQuery.total = result.data.total
            this.listLoading = false
          } else {
            this.listLoading = false
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      changeStatus() {
        return this.downloadData.map(v => {
          if (v.dealStatus === '10') {
            v.dealStatus = '未处理'
          } else if (v.dealStatus === '20') {
            v.dealStatus = '处理中'
          } else if (v.dealStatus === '30') {
            v.dealStatus = '关闭'
          } else if (v.dealStatus === '40') {
            v.dealStatus = '让步'
          }
          if (v.taskNode === '0') {
            v.taskNode = '指令'
          } else if (v.taskNode === '10') {
            v.taskNode = '寻车'
          } else if (v.taskNode === '20') {
            v.taskNode = '移车'
          } else if (v.taskNode === '30') {
            v.taskNode = '提车'
          } else if (v.taskNode === '40') {
            v.taskNode = '收车质检'
          } else if (v.taskNode === '41') {
            v.taskNode = '入库移车'
          } else if (v.taskNode === '42') {
            v.taskNode = '分配入库'
          } else if (v.taskNode === '50') {
            v.taskNode = '出库备车'
          } else if (v.taskNode === '51') {
            v.taskNode = '出库确认'
          } else if (v.taskNode === '60') {
            v.taskNode = '装车交验'
          }
          return v
        })
      },
      exportExcel() {
        // 数据导出
        let queryParam = {}
        queryParam = this.$data.listQuery.condition
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        this.downloadLoading = true
        exceptionAPI.exportExcpList(queryParam).then(result => {
          this.downloadLoading = false
          if (result.code === 0) {
            this.downloadData = result.data
            if (this.downloadData.length) {
              const arr = this.changeStatus()
              require.ensure([], () => {
                const { export_json_to_excel } = require('@/vendor/Export2Excel')
                const tHeader = ['订单号', '车架号', '异常分类', '异常描述', '处理状态', '登记人', '登记时间']
                const filterVal = ['omsOrderNo', 'vin', 'taskNode', 'exDescribe', 'dealStatus', 'registerUser', 'registerTime']
                const data = this.formatJson(filterVal, arr)
                export_json_to_excel(tHeader, data, this.filename)
              })
            }
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      handleSizeChange(val) {
        // 分页size变化
        this.$data.listQuery.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.$data.listQuery.current = val
        this.list()
      },
      moreClick() {
        // 更多click
        this.$data.searchFlag = !this.$data.searchFlag
      },
      searchClick() {
        // 搜索
        this.list()
      },
      reset() {
        this.$data.listQuery.condition = {
          // houseId: this.$store.getters.currentStorehouse.id,
          vin: null,
          taskNode: null,
          orderNo: null,
          dealStatus: null,
          startDate: null,
          endDate: null
        }
        this.list()
      },
      checkPic(value) {
        this.$data.dialogVisible = true
        this.imgList = value
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
 .detailBox{
   height: 22px;
   overflow: hidden;
   cursor: pointer;
   &:hover{
     overflow: visible!important;
     height: auto!important;
   }
 }
</style>
